<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 300px;
				top: 200px;
				background-color: #FF4500;
			}
			#box.reset{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 300px;
				top: 200px;
				background-color: #FF4500;
			}
		</style>
	</head>
	<body>
		<button id="btn">向左走</button>
		
		<button id="btn1">向右走</button>
		
		<button id="btn2">给我旋转</button>
		<button id="btn3">恢复原位置</button>
		<span id="box"></span>
		
		
		<script src="通用兼容文件.js"></script>
		<script>
			window.onload = function(){
				var a =1;
			$('btn').onclick = function(){
				movex($('box'), 100, 20);
			};
			
			$('btn1').onclick = function(){
				movex($('box'), 500, 20);
			};
			
			$('btn2').onclick = function(){
				
				$('box').style.transform = "translate("+(a*50)+"px,"+(a*50)+"px) rotate("+(a*50)+"deg) scale("+(a*1.3)+")"
				a++;
				
			};
			$('btn3').onclick = function(){
				
				$('box').style.left = 300 +'px';
				$('box').style.left =  200+'px';
					
	
				
			};
				
			}
		</script>
	</body>

</html>
